<template>
  <div class="el-scroll-box">
    <el-scrollbar>
      <div class="study-wrapper">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-top:10px">
          <el-breadcrumb-item :to="{ name: 'Dashboard' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'Dashboard' }">{{ routeParams.pName }}</el-breadcrumb-item>
          <el-breadcrumb-item>{{ routeParams.name }}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-tabs v-model="activeName" style="margin-top:10px">
          <el-tab-pane label="学习路线安排" name="1">
            <ul class="line-wrappper">
              <li v-for="item in bookList" :key="item.id">
                <div class="left">
                  <img :src="item.picFile" alt="">
                </div>
                <div class="middle">
                  <div style="margin-bottom:10px" @click="$router.push({ name: 'CourseBody', params: { id:item.id } })">{{ item.name }}</div>
                  <div style="color: #b4c4d2;font-size: 13px;">
                    <span>{{ item.bookCount }}课时</span>
                    <svg-icon icon-class="icon-shijian" style="margin-left:20px;margin-right:5px" />
                    <span>{{ item.bookTime }}</span>
                  </div>
                </div>
                <div class="right">
                  <button @click="$router.push({name: 'CourseBody', params: { id: item.id }})">进入学习</button>
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { getLearnGroupTable } from '@/api/learnCenter'
import { fileHostUrl, formatSeconds } from '@/utils'
export default {
  name: 'StudyLine',
  data() {
    return {
      activeName: '1',
      bookList: [],
      routeParams: {}
    }
  },
  created() {
    if (!this.$route.params.name) {
      const routeParams = window.sessionStorage.getItem('route_params_' + this.$route.params.id)
      this.routeParams = JSON.parse(routeParams).data
    } else {
      this.routeParams = this.$route.params
    }
    this.initWindow()
  },
  methods: {
    initWindow() {
      const vPar = new this.ParamArr()
      // vPar.setStr('BookIDs', this.$route.params.id)
      vPar.setStr('GroupID', this.routeParams.id)
      getLearnGroupTable(vPar).then(vPar => {
        // console.log(vPar)
        const nodes = []
        const table = new this.SQLTable(vPar.getTable('k_learn_book'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['picFile'] = fileHostUrl + '/' + table.getValueByName('PicFile')
          node['name'] = table.getValueByName('Name')
          node['createTime'] = table.getValueByName('CreateTime')
          node['createBy'] = table.getValueByName('CreateBy')
          node['bookCount'] = table.getValueByName('BookCount')
          node['enable'] = table.getValueByName('Enable')
          node['bookTime'] = formatSeconds(table.getValueByName('BookTime'))
          if (node['enable'] === '1') {
            nodes.push(node)
          }
          table.next()
        }
        this.bookList = nodes
        // console.log('this.bookList')
        // console.log(this.bookList)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scroll-box {
  width: 100%;
  height: 100%;
  background-image: url('../../../assets/user/Main_bg.png');
  background-size: 100%;
  background-repeat: no-repeat;
  .el-scrollbar {
    height:100%
  }
}
.study-wrapper {
  width: 80%;
  margin: 0 auto;
}
::v-deep .el-tabs .el-tabs__item {
  font-size: 15px;
  // font-weight: bold;
}
.line-wrappper {
  padding-left: 0;
  li {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    font-size: 14px;
    padding-bottom: 5px;
    margin-bottom: 8px;
    .left {
      img {
        width: 50px;
        height: 50px;
        object-fit: cover;
      }
    }
    .middle {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      margin-left: 10px;
      &:hover > div:nth-child(1) {
        cursor: pointer;
        text-decoration: underline;
      }
    }
    .right {
      display: flex;
      align-items: center;
      button {
        margin-left: 5px;
        width: 120px;
        height: 30px;
        border: none;
        // border-radius: 5px;
        box-shadow: none;
        background: $primaryColor;
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
::v-deep .el-tabs__item.is-active {
  color: $primaryColor !important;
}
::v-deep .el-tabs__active-bar {
  color: $primaryColor !important;
}
</style>
